<template>
	<view class="con">
		<view class="page">
			<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
				<view class="top_box">
					<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
					<view class="top_box_title">房东首页</view>
					<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
				</view>
			</view>
			<!-- 房东信息 -->
			<view class="info">
				<image class="info_img" :src="fangdong.photo" />
				<view class="info_box">
					<text class="info_box_left">{{ fangdong.name }}</text>
					<view class="info_box_right">实名认证</view>
				</view>
			</view>

			<!-- 房源标题 -->
			<view class="title">
				<view class="blue-line"></view>
				<text class="text">在线房源({{ count }}套)</text>
			</view>
		</view>
		<!-- 房源列表 -->
		<view class="list">
			<view class="list_nr" v-for="(item, index) in list" :key="index" @click="to_condo_detail(item.id)">
				<image class="list_nr_img" :src="item.photo" mode=""></image>
				<view class="list_nr_pfzw">
					<image class="list_nr_pfzw_img" src="/static/5.png" mode=""></image>
					<view class="list_nr_pfzw_text">{{ item.xingji }}</view>
				</view>
				<view class="list_nr_box">
					<view class="list_nr_title">{{ item.title }}</view>
					<view class="list_nr_text">
						{{ item.shi }}室{{ item.ting }}厅·{{ item.shuliang }}床·宜住{{ item.renshu }}人
					</view>
					<view class="list_nr_num">
						<span class="span1">¥</span>
						<span class="span2">{{ item.price }}</span>
						<span class="span3">/晚</span>
						<!-- <span class="span4">¥{{ item.price }}</span> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let id = ref(0)
	let fangdong = ref({})
	let list = ref([])

	let count = ref(0)
	const indexlist = async () => {
		await http.noAuthpost('/srapi/home/fddetail', { id: id.value }).then((res) => {
			console.log('返回值', res)
			fangdong.value = res.fangdong
			list.value = res.data
			count.value = res.count
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})

	const to_condo_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/condo_detail/condo_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.con {
	}
	.page {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		background: linear-gradient(0deg, #f4f5f9 0%, #c0e6fc 100%);
	}
	.top {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.info {
		width: 710rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;

		.info_img {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.info_box {
			flex: 1;
			display: flex;
			/* 内容左对齐 | 内容右对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
			/* justify-content: flex-start | flex-end | center | space-between | space-around */
			justify-content: space-between;
			/* 内容上方对齐 | 内容下方对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
			/* align-items: flex-start | flex-end | center | baseline | stretch */
			align-items: center;
			.info_box_left {
				font-size: 30rpx;
				font-weight: 500;
			}

			.info_box_right {
				font-size: 24rpx;
				color: #1e80ff;
				border: 1rpx solid #1e80ff;
				border-radius: 10rpx;
				padding: 4rpx 12rpx;
				margin-top: 10rpx;
			}
		}
	}

	.title {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		padding: 20rpx;
		.blue-line {
			width: 6rpx;
			height: 32rpx;
			background: #1e80ff;
			margin-right: 12rpx;
			border-radius: 4rpx;
		}

		.text {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		padding: 0 20rpx;
		.list_nr {
			width: 335rpx;
			position: relative;
			background: #ffffff;
			border-radius: 12rpx;
			.list_nr_img {
				width: 335rpx;
				height: 335rpx;
			}
			.list_nr_pfzw {
				width: 106rpx;
				position: absolute;
				right: 10rpx;
				top: 280rpx;
				.list_nr_pfzw_img {
					width: 106rpx;
					height: 34rpx;
					border-radius: 17rpx;
					position: absolute;
					z-index: 1;
				}
				.list_nr_pfzw_text {
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #ffffff;
					position: relative;
					z-index: 2;
					padding-left: 20rpx;
				}
			}
			.list_nr_box {
				padding: 20rpx;
				.list_nr_title {
					white-space: nowrap; /* 禁止换行 */
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 显示省略号 */
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.list_nr_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					margin-bottom: 15rpx;
				}
				.list_nr_num {
					.span1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #e93424;
					}
					.span2 {
						font-size: 36rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span3 {
						font-size: 20rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span4 {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #787878;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	//
</style>
